<template>
  <div>
    <el-dialog v-model="props.isShow" :fullscreen="true" @close="close()">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h1 :id="titleId" :class="titleClass">{{ props.title }}</h1>
          <div class="btns">
            <el-button
              type="primary"
              v-if="props.isDownload"
              @click="download"
              size="large"
              >下载</el-button
            >
            <el-button
              type="primary"
              v-if="props.isPrint"
              @click="print"
              size="large"
              >打印</el-button
            >
            <el-button
              type="primary"
              v-if="props.isShare"
              @click="share"
              size="large"
              >分享</el-button
            >
          </div>
        </div>
      </template>
      <iframe
        id="iframe"
        ref="refIframe"
        :src="iframeUrl"
        width="85%"
        height="100%"
        style="border: 0"
      ></iframe>
      <div class="fileWrap">
        <div class="voice">
          <el-tooltip content="播放">
            <el-button @click="speak" :icon="VideoPlay" circle />
          </el-tooltip>
          <el-tooltip content="暂停">
            <el-button @click="pause" :icon="VideoPause" circle />
          </el-tooltip>
          <el-tooltip content="继续">
            <el-button @click="continues" :icon="DArrowRight" circle />
          </el-tooltip>
          <el-tooltip content="关闭">
            <el-button @click="closes" :icon="CircleClose" circle />
          </el-tooltip>
        </div>
        <slot name="fileInfo">
          <el-descriptions title="文件动态" :column="1" direction="vertical">
            <el-descriptions-item
              ><el-icon><Download /></el-icon>下载次数</el-descriptions-item
            >
            <el-descriptions-item>预览次数</el-descriptions-item>
            <el-descriptions-item>打印次数</el-descriptions-item>
            <el-descriptions-item>分享次数</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="文件详情" :column="1" direction="vertical">
            <el-descriptions-item label="入库时间"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item label="入库人员"
              >18100000000</el-descriptions-item
            >
            <el-descriptions-item label="大小">Suzhou</el-descriptions-item>
            <el-descriptions-item label="来源">Suzhou</el-descriptions-item>
            <el-descriptions-item label="标签"
              ><el-tag size="small">School</el-tag>
              <el-tag size="small">School</el-tag></el-descriptions-item
            >
            <el-descriptions-item label="路径">Suzhou</el-descriptions-item>
          </el-descriptions>
        </slot>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, nextTick, ref, watch } from 'vue';
import {
  VideoPlay,
  DArrowRight,
  VideoPause,
  CircleClose,
} from '@element-plus/icons-vue';
const publicPath = 'http://' + window.location.host;
const synth = window.speechSynthesis;
const voice = new SpeechSynthesisUtterance();
/**
 *  text – 要合成的文字内容，字符串
 * lang – 使用的语言，字符串， 例如：“zh-cn”
 * voiceURI – 指定希望使用的声音和服务，字符串
 * volume – 声音的音量，区间范围是0到1，默认是1
 * rate – 语速，数值，默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍。
 * pitch – 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1
 */
voice.lang = 'zh-CN';
voice.volume = 1;
voice.rate = 0.7;
voice.pitch = 0.6;
// voice.voiceURI = 'Google 普通话（中国大陆）';
const htmlContent = ref<string>('');

htmlContent.value =
  '工程平战转换信息统计报告。徐州市全市编制转换工程824824个，掩蔽面积332.30332.30万平方米，掩蔽人员8383万人。全市近五年竣工工程呈下降下降趋势。地道工程44个，附建工程454454个，掘开式工程00个，坑道工程11个。 战时用于生产车间工程00个，用于疏散干道工程00个，用于治安专业工程00个，用于人防物资库00个。鼓楼区鼓楼区工程数量126126个，掩蔽面积67.5467.54万平方米，掩蔽人员1616个，鼓楼区鼓楼区工程平战转换所需转换劳动力124394124394工日， 耗费3731.823731.82万元。其中防护等级核4级工程数量11个，核4B级工程数量00个，常5级工程数量55个， 核5级工程数量1111个，常6级工程数量1212个，核6级工程数量9191个，核6B级工程数量4242个。 工程防化级别，甲级工程00个，乙级工程1010个，丙级工程106106个，丁级工程4545个。 鼓楼区重要经济目标66个，其中，一类重要经济目标22个，二类重要经济目标44个，三类重要经济';

const props = defineProps({
  isShow: {
    type: Boolean,
  },
  title: {
    type: String,
    default: '预览',
  },
  action: {
    type: String,
    default: 'api',
  },
  isDownload: {
    type: Boolean,
    default: true,
  },
  isPrint: {
    type: Boolean,
    default: true,
  },
  isShare: {
    type: Boolean,
    default: true,
  },
  //pdfjs 按钮权限
  pdfButtonPermissions: {
    type: Object,
    default: () => {
      return {
        noKeyword: true, //禁止键盘快捷键（无法保存，打开f12）
        noCopy: true, //禁止复制
        pdfBlur: true, ///鼠标移出模糊
        download: false, //去除pdfjs自带下载打印等按钮
        print: false,
        draw: false,
        openFile: false,
        tuc: false,
        file: false,
      };
    },
  },
  //是否展示水印
  showWatermark: {
    type: Boolean,
    default: true,
  },
  //水印基础样式
  watermarkStyle: {
    type: Object,
    default: () => {
      return {
        watermark_txt: '水印名称',
        watermark_x: 60, //水印起始位置x轴坐标
        watermark_y: 130, //水印起始位置Y轴坐标
        watermark_rows: 10, //水印行数
        watermark_cols: 5, //水印列数
        watermark_x_space: 300, //水印x轴间隔
        watermark_y_space: 250, //水印y轴间隔
        watermark_color: 'grey', //水印字体颜色
        watermark_alpha: 0.2, //水印透明度
        watermark_fontsize: 48, //水印字体大小
        watermark_font: '微软雅黑', //水印字体
        watermark_width: 220, //水印宽度
        watermark_height: 80, //水印长度
        watermark_angle: 45, //水印倾斜度数***
      };
    },
  },
});
const iframeUrl = ref('');
const pdfBaseUrl = ref(publicPath + '/pdf/web/viewer.html?file=');
const refIframe = ref<any>(null);
const emits = defineEmits(['updateShow', 'download', 'print', 'share']);
const close = () => {
  emits('updateShow');
  synth.cancel();
};
const download = () => {
  emits('download');
};
const print = () => {
  emits('print');
};
const share = () => {
  emits('share');
};
onMounted(() => {
  // htmlContent.value = refIframe.value
  // console.log(refIframe.value,789)
});
const speak = () => {
  console.log(synth.getVoices());

  synth.cancel();
  voice.text = htmlContent.value;
  synth.speak(voice);
};
const pause = () => {
  synth.pause();
};
const continues = () => {
  synth.resume();
};
const closes = () => {
  synth.cancel();
};
const sendMessage = () => {
  let sendData = {
    showWatermark: props.showWatermark,
    watermarkStyle: props.watermarkStyle,
    pdfButtonPermissions: props.pdfButtonPermissions,
  };
  const iframe = document.getElementById('iframe');
  (iframe as HTMLIFrameElement).onload = function (e: any) {
    refIframe.value?.contentWindow.postMessage(sendData, '*');
  };
};
watch(
  () => props.isShow,
  async (newValue, oldValue) => {
    await nextTick();
    if (newValue) {
      sendMessage();
      iframeUrl.value = pdfBaseUrl.value + encodeURIComponent(props.action);
    }
  },
);
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  height: 100%;
  overflow: hidden;
  .el-dialog__header {
    height: 60px;
    background-color: rgb(168, 193, 194);
    margin-right: 0;
    .btns {
      margin-right: 30px;
    }
    .my-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-dialog__title {
        font-size: 24px;
      }
    }
    .el-dialog__headerbtn {
      font-size: 30px;
      top: 22px;
    }
  }

  .el-dialog__body {
    padding: 0;
    height: calc(100% - 90px);
    display: flex;
    justify-content: space-between;
    .fileWrap {
      height: 100%;
      width: 15%;
      .voice {
        margin-top: 10px;
        display: flex;
        justify-content: space-evenly;
      }
      .el-descriptions {
        margin-top: 20px;
        .el-descriptions__body {
          width: 80%;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>
